.unis-{
	&topBar {
		background: $light;
		height: 3.75rem;
		box-shadow: 0px 0.125rem 0.625rem rgba(44, 60, 89, 0.07);
		display: flex;
		justify-content: flex-end;
		align-items: center;
		padding-right: 1.75rem;
		.search-box {
			width: 13.625rem;
			position: relative;
			@include transitionAll5;
			height: 2.25rem;
			border: 2px solid $inputBorder;
			box-sizing: border-box;
			border-radius: 2px;
			justify-content: space-between;
			align-items: center;
			display: flex;
			padding-right: 0.5rem;
			.placeholder{
				position: absolute;
				top:0.375rem;
				bottom: 0;
				left: 0.9375rem;
				color: $themeDisabledColor;
				font-size: 0.875rem;
				z-index: 0;
				@include transitionAll5;
			}
			.placeholder-in{
				left: -6.25rem;
				@include transitionAll5;
			}
			input {
				position: absolute;
				top:0;
				bottom: 0;
				z-index: 1;
				left: 0;
				right: 0.9375rem;
				display: block;
				height: 100%;
				box-shadow:none;
				border: none !important;
				background: none;
				outline: none;
				padding-left: 0.5rem;
				padding-right: 0.5rem;
				margin: 0;
			}
			i{
				position: absolute;
				top:0.3125rem;
				right: 0.3125rem;
				font-size: 22px;
			}

		}
		.search-box-in {
			@include transitionAll5;
			width: 55.9375rem;
		}
		.bell-box, .user_box {
			width: 2.25rem;
			height: 2.25rem;
			//border: 2px solid $light;
			box-sizing: border-box;
			border-radius: 2px;
			display: flex;
			justify-content: center;
			align-items: center;
			margin: auto 0.8125rem;
			position: relative;
			cursor: pointer;
		}
		.bell-box {
			.hint-box {
				height: 1rem;
				width: 1rem;
				border-radius: 100%;
				color: $light;
				position: absolute;
				top: -20%;
				right: -20%;
				background: $themePressed;
				font-size: 0.75rem;
				text-align: center;
				line-height: 1rem;
			}
			.notifications {
				position: absolute;
				top: 125%;
				right: 0;
				width: 30rem;
				cursor: default;
				background: $light;
				border-radius: 4px;
				box-shadow: 0px 0px 0.1875rem rgba(44, 60, 89, 0.2);
				z-index: 999999;
				.title-box {
					height: 3.9375rem;
					line-height: 3.9375rem;
					font-weight: bold;
					font-size: 1.125rem;
					background: rgba(200, 216, 228, 0.5);
					border-radius: 4px 4px 0 0;
					padding-left: 1.5rem;
				}
				.messages_connect {
					max-height: 25rem;
					overflow: auto;
					@include rollBackground;
					.messages-box {
						padding-left: 1.5rem;
						padding-right: 1.5rem;
						padding-bottom: 1.5rem;
						padding-top: 0.625rem;
						.message-lable {
							height: 2.625rem;
							width: 100%;
							display: flex;
							justify-content: space-between;
							align-items: center;
							.vew-all {
								color: $themeHover;
								border-radius: 4px;
								font-weight: bold;
								font-size: 0.875rem;
								line-height: 1.5rem;
								cursor: pointer;
							}
						}
						.detal_box {
							border-top: 1px solid $themeDisabledColor;
							margin-bottom: 1.5rem;
							.message-detals {
								display: flex;
								padding-top: 1.9375rem;
								padding-bottom: 1.9375rem;
								align-items: center;
								.img-box {
									width: 5.5rem;
									height: 5.5rem;
									margin-right: 1.5rem;
									background: $inputPlaceholderColor;
								}
								.detal-message {
									flex: 1;
									display: flex;
									flex-wrap: wrap;
									flex-direction: column;
									.title {
										font-style: normal;
										font-weight: normal;
										font-size: 0.75rem;
										line-height: 1rem;
										color: $inputHoverColor;
									}
									.name {
										font-family: Lato;
										font-style: normal;
										font-weight: bold;
										font-size: 0.8125rem;
										line-height: 0.9375rem;
										color: $body;
										margin-top: 0.5rem;
									}
									.note {
										margin-top: 0.5rem;
										font-style: normal;
										font-weight: normal;
										font-size: 0.875rem;
										line-height: 1.5rem;
										color: $body;
									}

								}
								.detal-stage {
									width: 1rem;
									height: 1rem;
									margin-left: 1.25rem;
									border-radius: 100%;
									background: $themePressed;
								}
							}
						}
					}
				}
			}
		}
		.user_box {
			.user {
				width: 1.5625rem;
				height: 1.5625rem;
				border-radius: 100%;
				background: $themePressed;
				text-align: center;
				line-height: 1.5625rem;
				color: $light;
				font-weight: bold;
				font-size: 0.875rem;
			}
			.user-connect {
				position: absolute;
				top: 125%;
				right: 0;
				width: 8.625rem;
				cursor: default;
				background: $light;
				padding-top: 0.3125rem;
				//border-radius: 4px;
				box-shadow: 0px 0px 0.1875rem rgba(44, 60, 89, 0.2);
				z-index: 9999;
				border-top: solid $px4 $themeHover;
				.user-detal {
					padding: 1.25rem 1.0625rem;
					border-bottom: 1px solid rgba(68, 69, 69, 0.2);

				}
				.title {
					font-weight: bold;
					font-size: 0.875rem;
					color: $body;
					padding-top: 0.3125rem;
				}
				.eml {
					font-size: 0.75rem;
					font-style: normal;
					font-weight: normal;
					color: $body;
					padding-top: 0.625rem;
				}
				.manage {
					font-style: normal;
					font-weight: bold;
					font-size: 0.8125rem;
					padding-top: 0.625rem;
					color: $themeHover;
					white-space: nowrap

				}
				.logout {
					padding: 0.75rem 1.0625rem;
					font-weight: bold;
					font-size: 0.875rem;
					color: $body;
					cursor: pointer;

				}
			}
		}
		.active {
			//@include transitionAll5;
			//background: rgba(200, 216, 228, 0.5);
			//border: 2px solid $replenishSecondary;
		}

	}
	&button {
		min-width: 6.75rem;
		height: 2rem;
		border: 1px solid $themeDisabledColor;
		box-sizing: border-box;
		border-radius: 2px;
		text-align: center;
		line-height: 2rem;
		padding-right: 1.5rem;
		padding-left: 1.5rem;
		cursor: pointer;
	}
	&tms-topBar{
		padding: $px16 $px23;
		background: $body;
		display: flex;
		justify-content: flex-end;
		align-items: center;
		min-height: $px46;
	}
}


@media only screen and (max-width: 768px), only screen and (max-device-width:768px) {
	html,body{
		font-size: 14px;
	}

	.unis-{
		&topBar {
			justify-content: space-between!important;
			position: relative !important;
			.search-box {
			}
			.search-box-in {

			}
			.bell-box, .user_box {
				position: static!important;
				//position: inherit !important;
			}
			.bell-box {
				.notifications {
					left: 0!important;
					right: 0!important;
					width: 100% !important;
					padding-right: $px5;
				}
			}
			.user_box {
				.user {
					font-size: 1rem;
				}
				.user-connect {
					right: $px2;

				}
			}


		}

	}
}

